<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>欢迎注册</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				font-family: "Helvetica Neue", Helvetica, "PingFang SC",
				  "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
			}
			.main{

                height: 100vh;
				width: 100%;

			}
			.nav{
				width: 100%;
				height: 60px;
				background: #1f2430;
			}
			.nav h3{
				height: 60px;
				line-height: 60px;
				margin-left: 30px;
				font-family: "Helvetica Neue", Helvetica, "PingFang SC",
				  "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
				 color: wheat;
			}
			main{
				width: 100%;
				height: 300px;

			}
			main .card{
				margin: 0px auto ;
				padding: 20px;
				width: 88vw;
				background-color: #d2a145 ;
				color: aliceblue;
				border-radius: 3px;

			}
			.title{
				display:block;
				margin: 5px auto;
				text-align: left;
				width: 90vw;
				color: #d2a145;
				font-size: 18px;
				font-weight: 700;
			}
			.card span{

			}
			.potinter img{
				width: 100%;
				height: 100%;
			}
			.input>span{
				color: #d2a145;
				font-size: 18px;
				font-weight: 700;
			}
			.itemMum>span{
				display: inline-block;
				width: 40%
			}
			.itemColor>span,.itemColor>div{
				font-size: 14px;
				display: block;
				width: 85%;
				margin: 5px auto;
			}
			.itemColor button{
				width: 85%;
				height: 40px;
				margin: 0px auto 10px;

				background-color: rgba(255,255,255,.9);
			}
			.footer {
			  height: 80px;
			  background-color: #1f2430;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  font-size: 12px;
			  color: wheat;
			  position: absolute;
			  bottom: 0px;
			  width: 100vw;
			}
            .winning{
                margin: 20px auto ;
                padding: 20px;
                width: 88vw;

                color: #d2a145;
                border-radius: 3px;
            }
            .winning>img{
                width: 100%;
                height: 100%;
            }
		</style>
	</head>
	<body>
		<div class="main">
			<div class="nav">
				<h3>中奖邮件通知！</h3>
			</div>
			<main>
				<span class="title">Lucky抽奖</span>
				<div class="card">
					<span>尊敬的<span style="font-size: 30px;padding: 0 3px" th:text="${nickName}">YanJie</span>：</span>
					<p style="text-indent: 2em">恭喜你在2021年12月12日使用 Lucky 抽奖服务时，抽中了奖牌榜上的<span th:text="${text}">一等奖</span>，奖品为<span th:text="${prizeName}">华为P40 5G</span>，继续参与其他抽奖项目你将能够享受到抽奖的乐趣，完善个人信息能够更让您拥有更好的体验!</p>
				    <p>（图片仅供参考）</p>
                </div>
                <div class="winning">

                    <p>奖品展示区:</p>
					<img th:src="@{${prizeUrl}}" alt="" />
                </div>
			</main>
			<div class="footer">
			  <p>开发者：Dimples_YJ、周奥军、符笑添、陈佳俊</p>
			</div>
		</div>
	</body>
</html>
